{% extends get_theme() + "/common/header.html" %}

{% block title %}Flask - 标签文章 - PPress主题应用{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('main_static', filename='ppress/static/css/tag_posts.css') }}">
{% endblock %}

{% block content %}
<div class="tag-header">
    <div class="container">
        <div class="tag-info">
            {% if get_tag() %}
                {% set tag = get_tag() %}
            <h1 class="tag-title">{{ tag.title }}</h1>
            <p class="tag-description">{{ tag.desc }}</p>
            <div class="tag-meta">
                <span class="meta-item">
                    <i class="icon-tag"></i>
                    标签
                </span>
                <span class="meta-item">
                    <i class="icon-file"></i>
                    {{ tag.count }} 篇文章
                </span>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 文章列表区域 -->
<div class="article-list-container">
        <div class="row">
            <!-- 文章列表 -->
            <div class="col-md-8">
               <div class="article-list">
                    <!-- 模拟文章数据 -->
               {% if get_tag() %}
               {% set tag = get_tag() %}
                    {% for post in get_articles(tags=tag.alias) %}
                    <article class="article-item">
                        <div class="article-image">
                            <a href="/article/{{ post.slug }}">
                                <img src="{{ post.featured_image }}" alt="{{ post.title }}" class="img-responsive">
                            </a>
                        </div>

                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="/article/{{ post.slug }}">{{ post.title }}</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        {{ date_format(post.published_at) }}
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        {% if get_categories(post.id) %}
                                            {% set category = get_categories(post.id) %}
                                            <a href="/category/{{ category.alias }}">{{ category.title }}</a>
                                        {% else %}
                                            <a href="#">未分类</a>
                                        {% endif %}
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        {% for tag in get_tags(post.id) %}
                                            {% if loop.index != get_tags(post.id)|length %}
                                                <a href="/tag/{{ tag.alias }}">{{ tag.title }}、</a>
                                            {% endif %}
                                            {% if loop.index == get_tags(post.id)|length %}
                                                <a href="/tag/{{ tag.alias }}">{{ tag.title }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        {{ post.view_count }}
                                    </span>
                                </div>
                            </div>

                            <div class="article-excerpt">
                                {{ post.excerpt }}
                            </div>

                            <div class="article-footer">
                                <a href="/article/{{ post.slug }}" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>
                    {% endfor %}
                {% endif %}
                </div>
                
                <!-- 分页 -->
                <div class="pagination-container">
                    <nav aria-label="文章分页">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <span class="page-link">上一页</span>
                            </li>
                            <li class="page-item active">
                                <span class="page-link">1</span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-md-4">
                <div class="sidebar">
                    <!-- 分类目录 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">分类目录</h3>
                        <ul class="category-list">
                           {% for category in get_categories() %}
                            <li>
                                <a href="/category/{{ category.alias }}">
                                    {{ category.title }}
                                    <span class="count">({{ category.count }})</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    
                    <!-- 标签云 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">标签云</h3>
                        <div class="tag-cloud">
                            {% for tag in get_tags() %}
                                <a href="/tag/{{ tag.alias }}" class="tag-item">{{ tag.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <!-- 最新文章 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">最新文章</h3>
                        <ul class="recent-posts">
                        {% if get_tag() %}
                        {% set tag = get_tag() %}
                            {% for post in get_articles(tags=tag.alias,orderby='desc', per_page=5) %}
                            <li>
                                <a href="/article/{{ post.slug }}">
                                    {{ post.title }}
                                </a>
                                <span class="post-date">{{ date_format(post.published_at) }}</span>
                            </li>
                            {% endfor %}
                        {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
</div>
{% endblock %} 